<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>组织结构</title>
<script src="js/jquery-1.9.1.min.js"></script>

<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">

<script src="js/jquery.jOrgChart.js"></script>
<link href="css/jquery.jOrgChart.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.jOrgChartItem.css" rel="stylesheet" type="text/css"/>

<script src="js/jquery.jtip.js"></script>
<link href="css/jquery.jtip.css" rel="stylesheet" type="text/css">

<script src="js/rb.js"></script>
<link href="css/rb.css" rel="stylesheet" type="text/css">

<script src="js/dump.js"></script>
<script>

$(document).ready(function() {	
	//$("#wai").css("width",FRAMEWIDTH-230+"px");
	//$("#info").css("width","200px");
	//$("#info").css("right","10px");	
	//$("#info").mCustomScrollbar();
	
	$("#wai").css("width",FRAMEWIDTH-20+"px");
	
	getDep(); //获取全部部门数据
	//监听表单提交
	
});

function showedit(id,name){
	$('#JT').remove();
	JT_show(id,id,name+'：');
	
}
//获取全部部门数据
function getDep(){
	$.ajax({
		timeout:2000, 
		type: AJAXMETHOD,
        async: false,
        url: SERVER+"dept",
        dataType: AJAXJSON,
        jsonp: "callback",
        jsonpCallback:"callback",
        success: function(json){
			//dump(json.respList);
			for (var i=0;i<json.respList.length;i++){
				$("#alldep > ul").append("<li id='li_"+json.respList[i].id+"' superdep='"+json.respList[i].superDep+"'><span>"+json.respList[i].name+"</span></br><a href=\"javascript:JT_editDep('"+json.respList[i].id+"','修改部门');\" id='"+json.respList[i].id+"'>修改</a><ul></ul></li>");		
				if (("children" in json.respList[i])){
					getDepListData(json.respList[i].children);
				}				
			}
			$("#org").jOrgChart({
				chartElement : "#chart",
				dragAndDrop  : false
			});
        },
        error: function(){
            alert("getDeplist Error!");
    	}
	});	
}

//递归插入部门数据
function getDepListData(data){
	for (var i in data) {
		if (data[i].children!=undefined ){
			$("#li_"+data[i].superDep+" > ul").append("<li id='li_"+data[i].id+"' superdep='"+data[i].superDep+"'><span>"+data[i].name+"</span></br><a href=\"javascript:JT_editDep('"+data[i].id+"','修改部门');\" id='"+data[i].id+"'>修改</a><ul></ul></li>");
			getDepListData(data[i].children);
		}else{
			$("#li_"+data[i].superDep+" > ul").append("<li id='li_"+data[i].id+"' superdep='"+data[i].superDep+"'><span>"+data[i].name+"</span></br><a href=\"javascript:JT_editDep('"+data[i].id+"','修改部门');\" id='"+data[i].id+"'>修改</a></br><a href=\"javascript:ifDelDep('"+data[i].id+"','"+data[i].name+"')\">删除</a><ul></ul></li>");
		}
	}
	
}

//获得非树状部门列表
function getDepListNoTreeData(id){
	var str="";
	$.ajax({
		timeout:2000, 
		type: AJAXMETHOD,
        async: false,
        url: SERVER+"dept/ajax/public",
        dataType: AJAXJSON,
        jsonp: "callback",
        jsonpCallback:"callback",
        success: function(json){
			//alert(json.respList[14].name);
			for (var i=0;i<json.respList.length;i++){
				if (json.respList[i].id != id){
					str += "<p val='"+json.respList[i].id+"'>"+json.respList[i].name+"</p>";		
				}
			}
			
			$("#depList").html(str);
			$("#depList p").click(function(){
				$("#depList p").each(function(){
					$(this).css("background-color","transparent");
					$(this).css("color","#000");
				});
				$(this).css("background-color","#36F");
				$(this).css("color","#fff");
				selectDepName = $(this).text();
				selectDepId = $(this).attr("val");
				$("#superDep").val($(this).attr("val"));
				
			});	
			$("#depList").css("overflow", "hidden");
			$("#depList").css("height", "200px");
			$("#depList").mCustomScrollbar({
				theme:"dark",
				advanced:{updateOnContentResize:true}
			});
        },
        error: function(){
            
    	}
	});
}

//创建部门后刷新组织结构图
function createDep(){
	//alert(selectDepId);
	var depName = $("#createDepName").val();
	if (depName.length>0){
		$.ajax({
			timeout:2000, 
			type: AJAXMETHOD,
			async: false,
			url: SERVER+"dept/add/dept?superDep="+selectDepId+"&name="+depName,
			dataType: AJAXJSON,
			jsonp: "callback",
			jsonpCallback:"callback",
			success: function(json){
				//dump(json);
				RB.Toast("创建部门成功！");
				jt_close();
				$("#chart").children().remove();
				$("#li_"+selectDepId+" > ul").append("<li id='li_"+json.respBody+"' superdep='"+selectDepId+"'><span>"+depName+"</span></br><a href=\"javascript:JT_editDep('"+json.respBody+"','修改部门');\" id='"+json.respBody+"'>修改</a></br><a href=\"javascript:ifDelDep('"+json.respBody+"','"+depName+"')\">删除</a><ul></ul></li>");
				$("#org").jOrgChart({
					chartElement : "#chart",
					dragAndDrop  : false
				});
				$(".node").each(function(index, element) {
					if($(this).hasClass("blurs")){
						$(this).toggleClass("blurs");	
					}
				});
				var x = $("#wai").width()/2-$("span:contains("+depName+")").position().left;
				var y = $("#wai").height()/2-$("span:contains("+depName+")").position().top-150;
				$("#chart").animate({ left: x + "px",top: y + "px"}, 1000);
				$("span:contains("+depName+")").parent().toggleClass("blurs");
				selectDepId = 0;
			},
			error: function(){
				alert("CreateDep Error!");
			}
		});
	}else{
		RB.Toast("部门名不能为空！");
	}
		
}
//修改部门
function editDep(id){
	var name = $("#editDepName").val();
	var superDepId = $("#li_"+id).attr("superdep");
	if (selectDepId != 0){
		superDepId = selectDepId;
	}
	if (name.length>0){
		$.ajax({
			timeout:2000, 
			type: AJAXMETHOD,
			async: false,
			url: SERVER+"dept/add/dept?superDep="+superDepId+"&name="+name+"&id="+id,
			dataType: AJAXJSON,
			jsonp: "callback",
			jsonpCallback:"callback",
			success: function(json){
				if (selectDepId!=0){
					var str = "<li id='li_"+id+"'>"+$("#li_"+id).html()+"</li>";
					jt_close();		
					$("#chart").children().remove();
					$("#li_"+id).remove();
					$("#li_"+selectDepId+" > ul").append(str);
					$("#li_"+id+" > span").text(name);
					$("#org").jOrgChart({
						chartElement : "#chart",
						dragAndDrop  : false
					});
					$(".node").each(function(index, element) {
						if($(this).hasClass("blurs")){
							$(this).toggleClass("blurs");	
						}
					});
					var x = $("#wai").width()/2-$("span:contains("+name+")").position().left;
					var y = $("#wai").height()/2-$("span:contains("+name+")").position().top-150;
					$("#chart").animate({ left: x + "px",top: y + "px"}, 1000);
					$("span:contains("+name+")").parent().toggleClass("blurs");
					//这里执行修改部门持久化操作
					//
					RB.Toast("修改部门归属关系成功！");
				}else{
					jt_close();
					$("#"+id).parent().find("span").text(name);
					//这里执行只修改部门名持久化操作
					//
					RB.Toast("修改部门名称成功！");
				}
				selectDepId = 0;
			},
			error: function(){
				alert("EditDep Error!");
			}
		});
	}else{
		RB.Toast("部门名不能为空！");
	}
		
}

//询问是否删除部门
function ifDelDep(id,name){
	RB.Alert("确认删除部门","您确认要删除<b>\""+name+"\"</b>部门吗？","delDep('"+id+"','"+name+"')");	
}

//确认删除部门
function delDep(id,name){
	$.ajax({
		timeout:2000, 
		type: AJAXMETHOD,
       	async: false,
        url: SERVER+"dept/delete/"+id,
        dataType: AJAXJSON,
       	jsonp: "callback",
        jsonpCallback:"callback",
        success: function(json){
			$("#chart").children().remove();
			$("#li_"+id).remove();
			$("#org").jOrgChart({
				chartElement : "#chart",
				dragAndDrop  : false
			});		
			RB.Toast("删除<b>\""+name+"\"</b>部门成功！");			
        },
        error: function(){
            alert("DeleteDep Error!");
    	}
	});
}

//搜索部门
function searchDep(){
	var name = $("#searchDep").val();
	var key = $("span:contains("+name+")").text();
	
	if (name.length>0){
		if (key != ""){
			$(".node").each(function(index, element) {
                if($(this).hasClass("blurs")){
					$(this).toggleClass("blurs");	
				}
            });
			var x = $("#wai").width()/2-$("span:contains("+name+")").position().left;
			var y = $("#wai").height()/2-$("span:contains("+name+")").position().top-150;
			$("#chart").animate({ left: x + "px",top: y + "px"}, 1000);
			$("span:contains("+name+")").parent().toggleClass("blurs");
		}else{
			RB.Toast("查询不到该部门，请确认输入信息！");	
		}
	}else{
		RB.Toast("错误，请输入要查询的部门名称！");	
	}
}

</script>
<style>
#chart{
	height:100%;
	position:absolute;
}

#wai{	
	position:absolute;
	background:url(assets/bkgd.png);
}

.rb_mainframe_middle_title{
	background-color:#6e8187;
}
</style>
</head>

<body onselectstart="return false">
<!--topbar--> 
<div class="rb_mainframe_top">
	<div class="rb_mainframe_top_title_first">组织结构</div>
    <div class="rb_mainframe_top_title_second">部门管理</div>
    <div class="rb_mainframe_top_btn">帮助</div>
  	<div class="rb_mainframe_top_btn"><a href="javascript:JT_createDep('createDepShow','新建部门');" id="createDepShow">新建部门</a></div>
    <div class="rb_mainframe_top_input"><img src="assets/top_input_icon_search.png"/><input type="text" placeholder="输入部门名..." name="searchDep" id="searchDep" /><input name="sumbit" type="button" value="搜索" onClick="searchDep()"></div>
</div>
<!--content--> 
<div class="rb_mainframe_content">
	<!--部门操作区域--> 
    <div class="rb_mainframe_middle" id="wai">
    	<div style="padding:10px;float:right;">可通过拖拽查找部门</div>
        <div class="orgChart" id="chart"></div>	
    </div>
    <!--公司信息--> 
    <!--
    <div class="rb_mainframe_middle" id="info">
        <div class="rb_mainframe_middle_title">统计信息</div>
        <span>部门总数:</span><p>16 个</p>
        <span>人员总数:</span><p>134 人</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p> 
        <span>机构代码:</span><p>hndfsj</p>
        <div class="rb_mainframe_middle_title">统计信息</div>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
        <span>单位名称:</span><p>河南东方世纪股份有限公司</p>
    </div>
    -->
</div> 


<!--初始化组织结构数据-->
<ul id="org" style="display:none">
	
	<li id="alldep">
    	全部部门                   
		<ul>
        	<!--
			<li id="a1">
            	企业文化部</br>
                <a href="javascript:showedit('a1_1','修改名称')" id="a1_1">修改名称</a>
                <a href="javascript:showedit('a1_2','调整归宿')" id="a1_2">调整关系</a>
            </li>
            -->
		</ul>
	</li>
</ul>         
</body>
<script>
var _x,_y = 0;
$("#chart").mousedown(function (e) { //e鼠标事件

	$("#chart").css("cursor", "move"); //改变鼠标指针的形状

	var offset = $(this).offset(); //DIV在页面的位置
	var x = e.pageX - offset.left; //获得鼠标指针离DIV元素左边界的距离
	var y = e.pageY - offset.top; //获得鼠标指针离DIV元素上边界的距离
	$(document).bind("mousemove", function (ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
	{
		$("#chart").stop(); //加上这个之后

		_x = ev.pageX - x; //获得X轴方向移动的值
		_y = ev.pageY - y; //获得Y轴方向移动的值

		$("#chart").animate({ left: _x-11 + "px", top: _y-62 + "px" }, 10);
	});
	
	$(document).bind("mouseup", function (ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
	{
		$("#chart").css("cursor", "default");
		$(this).unbind("mousemove");
	});

});
</script>
</html>
